<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 900px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap
        }

        #box>div {
            width: 200px;
            background-color: whitesmoke;
            margin-bottom: 20px;
            box-shadow: 10px 10px 20px 1px pink;
        }

        #box>div>span {
            display: block;
        }

        img {
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body style="text-align: center;">
    图片链接：<input type="text"><br>
    商品名称：<input type="text"><br>
    商品价格：<input type="text"><br>
    商品库存：<input type="text"><br>
    商品状态：<input type="text"><br>
    商品已售：<input type="text"><br>
    <button onclick="add()">添加商品</button><br>
    <input type="text" id="sou">
    <button onclick="sou()">搜索</button>
    <h1>商品管理</h1>
    <div id="box"></div>
    <div id="box2" style="display: none;">
        图片链接：<input type="text"><br>
        商品名称：<input type="text"><br>
        商品价格：<input type="text"><br>
        商品库存：<input type="text"><br>
        商品状态：<input type="text"><br>
        商品已售：<input type="text"><br>
        <button onclick="yes()">确认修改</button>
    </div>
    <div id="box3" style="display: none;">
        <input type="text">
        <button onclick="yes2()">确认修改</button>
    </div>
    <script>
        var box = document.getElementById("box")
        var inp1 = document.querySelectorAll("input")[0]
        var inp2 = document.querySelectorAll("input")[1]
        var inp3 = document.querySelectorAll("input")[2]
        var inp4 = document.querySelectorAll("input")[3]
        var inp5 = document.querySelectorAll("input")[4]
        var inp6 = document.querySelectorAll("input")[5]
        var ninp1 = document.querySelectorAll("#box2 input")[0]
        var ninp2 = document.querySelectorAll("#box2 input")[1]
        var ninp3 = document.querySelectorAll("#box2 input")[2]
        var ninp4 = document.querySelectorAll("#box2 input")[3]
        var ninp5 = document.querySelectorAll("#box2 input")[4]
        var ninp6 = document.querySelectorAll("#box2 input")[5]
        var box3 = document.getElementById("box3")
        var geng2 = document.querySelectorAll("#box3 input")[0]

        // 数据渲染
        function xuanran() {
            box.innerHTML = ""
            var xhr = new XMLHttpRequest()
            xhr.open("get", "https://liu.zzgoodqc.cn/goodsx/goodslist")
            xhr.send()
            xhr.responseType = "json"
            xhr.onload = () => {
                var a = xhr.response
                a.data.forEach((item, index) => {
                    box.innerHTML += `
                      <div>
                        <img src="${item.img}" alt="">
                        <span>名字：${item.goods_name}</span>
                        <span>价格：${item.price}</span>
                        <span>库存：${item.stock}</span>
                        <span>状态：${item.status}</span>
                        <span>已售：${item.sold}</span>
                        <button onclick="del(${item.id})">删除</button>
                        <button onclick="xiu(${item.id})">修改</button>
                        <button onclick="geng(${item.id})">更新商品状态</button>
                      </div>
                   `
                });
            }
            xhr.onerror = (e) => {
                console.log(e);
            }
        }
        xuanran()
        // 添加商品
        function add() {
            var xhr = new XMLHttpRequest()
            xhr.open("post", "https://liu.zzgoodqc.cn/goodsx/add")
            xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
            if (inp5.value == "1" || inp5.value == "2") {
                var obj = {
                    img: inp1.value,
                    goods_name: inp2.value,
                    price: inp3.value,
                    stock: inp4.value,
                    status: inp5.value,
                    sold: inp6.value
                }
            } else {
                alert("商品1上架2下架")
            }
            xhr.send(JSON.stringify(obj))
            xhr.onload = () => {
                xuanran()
            }
            xhr.onerror = (e) => {
                console.log(e);
            }
            // ninp1.value = ""
            // ninp2.value = ""
            // ninp3.value = ""
            // ninp4.value = ""
            // ninp6.value = ""
        }
        // 删除商品
        function del(id) {
            var xhr = new XMLHttpRequest()
            xhr.open("get", "https://liu.zzgoodqc.cn/goodsx/delete?id=" + id)
            xhr.send()
            xhr.onload = () => {
                xuanran()
            }
            xhr.onerror = (e) => {
                console.log(e);
            }
        }
        // 搜索商品
        function sou() {
            box.innerHTML = ""
            var sousuo = document.getElementById("sou").value
            var xhr = new XMLHttpRequest()
            xhr.open("post", "https://liu.zzgoodqc.cn/goodsx/search?goods_name=" + sousuo)
            xhr.send()
            xhr.onload = () => {
                var a = JSON.parse(xhr.response)
                a.data.forEach((item, index) => {
                    box.innerHTML += `
                      <div>
                        <img src="${item.img}" alt="">
                        <span>名字：${item.goods_name}</span>
                        <span>价格：${item.price}</span>
                        <span>库存：${item.stock}</span>
                        <span>状态：${item.status}</span>
                        <span>已售：${item.sold}</span>
                        <button onclick="del(${item.id})">删除</button>
                        <button onclick="xiu(${item.id})">修改</button>
                        <button onclick="geng(${item.id})">更新商品状态</button>
                      </div>
                   `
                })
            }
            xhr.onerror = (e) => {
                console.log(e);
            }
        }
        // 修改商品
        var id1;
        function xiu(id) {
            box2.style.display = "block"
            id1 = id
        }
        function yes() {
            var xhr = new XMLHttpRequest()
            xhr.open("post", "https://liu.zzgoodqc.cn/goodsx/update?id=" + id1)
            xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
            var obj = {
                img: ninp1.value,
                goods_name: ninp2.value,
                price: ninp3.value,
                stock: ninp4.value,
                status: ninp5.value,
                sold: ninp6.value
            }
            xhr.send(JSON.stringify(obj))
            xhr.onload = () => {
                xuanran()
            }
            xhr.onerror = (e) => {
                console.log(e);
            }
            ninp1.value = ""
            ninp2.value = ""
            ninp3.value = ""
            ninp4.value = ""
            ninp5.value = ""
            ninp6.value = ""
            box2.style.display = "none"
        }
        // 更新商品状态
        var id2;
        function geng(id) {
            box3.style.display = "block"
            id2 = id
        }
        function yes2() {
            if (geng2.value == "1" || geng2.value == "2") {
                var xhr = new XMLHttpRequest()
                xhr.open("GET", "https://liu.zzgoodqc.cn/goodsx/updateStatus?id=" + id2 + "&status=" + geng2.value)
                xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                xhr.send()
                xhr.onload = () => {
                    xuanran()
                }
                xhr.onerror = (e) => {
                    console.log(e);
                }
            } else {
                alert("1上架2下架")
            }
        }
    </script>
</body>

</html>